<template>
  <CommonPanel title="告警事件类型统计" :loading="loading">
    <div class="rank-box">
      <div>
        <RankItem
          class="rank-box_item"
          v-for="item of lists"
          :key="item.name"
          :info="item"
        />
      </div>
      <div>
        <RankItem
          class="rank-box_item"
          v-for="item of lists1"
          :key="item.name"
          :info="item"
        />
      </div>
    </div>
  </CommonPanel>
</template>

<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { CaretRight } from "@element-plus/icons-vue";
import RankItem from "../components/rank-item.vue";
import { onMounted, ref, watch } from "vue";
import { useStore } from "@/store";
import { numberFormat } from "@/utils";

const storeObj = useStore();

const loading = ref(false);
const visible = ref(false);
const columns = [
  { label: "项目名称", prop: "name" },
  { label: "项目金额", prop: "amount" },
];

let lists = ref([
  { name: "设备名称", value: 40, index: 1 },
  { name: "设备名称", value: 40, index: 2 },
  { name: "设备名称", value: 40, index: 3 },
  { name: "设备名称", value: 40, index: 4 },
  { name: "设备名称", value: 40, index: 5 },
]);
let lists1 = ref([
  { name: "消防水系统", value: 40, index: 6 },
  { name: "消防水系统", value: 40, index: 7 },
  { name: "消防水系统", value: 40, index: 8 },
  { name: "消防水系统", value: 40, index: 9 },
  { name: "消防水系统", value: 40, index: 10 },
]);
function slicedLists(n, y) {
  return lists.value.slice(n, y);
}
</script>

<style lang="scss" scoped>
.rank-box {
  height: 100%;
  padding: 16px 6px;
  box-sizing: border-box;

  display: flex;
  & > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 10px;
  }
}
</style>
